<template>
  <div class="goodsDetail">
    <h2>我是详情页哦！!</h2>
  <el-form ref="form" label-width="150px" size="mini" >
  <el-form-item label="商品编号:">
    <el-input v-model="goodsDetails.id"  :readOnly="!canEdit" >{{goodsDetails.id}}</el-input>
  </el-form-item>
  <el-form-item label="商品图片:">
    <el-image style="width: 100px; height: 100px":src="goodsDetails.img"></el-image>
  </el-form-item>
  <el-form-item label="商品名称:">
    <el-input v-model="goodsDetails.name"  :readOnly="!canEdit" >{{goodsDetails.name}}</el-input>
  </el-form-item>
  <el-form-item label="商品价格:">
    <el-input v-model="goodsDetails.price"  :readOnly="!canEdit" >{{goodsDetails.price}}</el-input>
  </el-form-item>
  <el-form-item label="商品库存数量:">
    <el-input v-model="goodsDetails.stock"  :readOnly="!canEdit" >{{goodsDetails.stock}}</el-input>
  </el-form-item>
  <el-form-item label="商品日销售量:">
    <el-input v-model="goodsDetails.sell_day"  :readOnly="!canEdit" >{{goodsDetails.sell_day}}</el-input>
  </el-form-item>
  <el-form-item label="商品日访问量:">
    <el-input v-model="goodsDetails.visit_day"  :readOnly="!canEdit" >{{goodsDetails.visit_day}}</el-input>
  </el-form-item>
  <el-form-item label="商品建立时间:">
    <el-input v-model="goodsDetails.time" :readOnly="!canEdit" >{{goodsDetails.time}}</el-input>
  </el-form-item>
  <el-form-item label="商品拼团价格:">
    <el-input v-model="goodsDetails.tuan_price" value="123456" :readOnly="!canEdit" >{{goodsDetails.tuan_price}}</el-input>
  </el-form-item>
  <el-form-item size="large">
    <el-button  @click="edit()">编辑</el-button>
    <el-button @click="save()" v-show="canEdit">保存</el-button>
    <el-button @click="deleteData()">删除</el-button>
    <el-button @click="returnGoods()">返回</el-button>
  </el-form-item>
</el-form>
  </div>
</template>
<script>
export default {
  name: 'goodsDetail',
  data(){
    return{
      id:0,
      goodsDetails:{},
      canEdit:false,
    }
  },
  methods:{
    edit(){
      this.canEdit = true;
    },
    save(){
      this.$store.dispatch('editGoodsData',this.goodsDetails).
      then(()=>{
         this.$router.push('/index/goods');
      })
    },
    deleteData(){
      this.$store.dispatch('deleteGoodsData',this.id).
      then(()=>{
         this.$router.push('/index/goods');
      })
    },
    returnGoods(){
       this.$router.push('/index/goods');
    }
  },
  created(){
    this.id = this.$router.history.current.params.id;
    let allData = this.$store.state.goodsStore.goodsData.data;
    console.log(allData, this.$store.state.goodsStore.goodsData.data)
    console.log(allData.length,88888)
      for(let i = 0; i < allData.length; i ++){
        if(allData[i].id == this.id){
          this.goodsDetails = allData[i];
        }
      }
      console.log(this.goodsDetails,9999)
  }
}
</script>
<style lang="less" scoped>
  .goodsDetail{
    width: 800px;
    margin: 0 auto;
  }
</style>
